* {
		box-sizing:border-box;
	}

	html {
		font-size:20px;
	}

	:root {
		--bodytext: 'Crimson Text', serif;
		--bodysize:1rem;
		--htext:'Crete Round', serif;
	}


	/* TWO PANEL LAYOUT */

/*this handles a big picture plus big textbox wrapping behaviour, based on Every Layout's sidebar */
body {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	gap:1rem;
}

body > :first-child  {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: 30ch;
  flex-grow: 1;
  height:100%;
}

body > :last-child {
  /* ↓ Grow from nothing */
  flex-basis: 0;
  flex-grow: 999;
  /* ↓ Wrap when the elements are of equal width */
  min-inline-size: 60%;

}

nav {
	position:sticky;
	max-height:99vh;
	top: 0;
}


	/* TYPE */


	h1,h2,h3,h4 {
		font-family: var(--htext);
	}

		
	h4 {
		font-size:var(--bodysize);
		font-weight:bold;
	}


    a {
		color: green
	  }
	

	q, cite {
		font-style:italic;
	}
	q::before, cite::before {
		content:"‘";
	}

	q::after, cite::after {
		content:"’";
	}
/* NAVIGATION */

nav {
	background: #ffffff;
	height:90vh;
  	padding:1em;
	border: 3px double black;
  	margin:2em;
	overflow:scroll;
  	font-family: var(--bodytext);
  	font-size: var(--bodysize);
	}

	main {
		padding:2em;
		}
		

/* ENTRIES */

	article {/*each genre of text */
	padding-top: 1em;
	}
	
	article:after { /*fancy lines */
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%; 
    padding-top: 1em;
    border-bottom: 5px double black; 
}
	
	section { /* each text itself */
		max-width:70ch;
		display:none;
	}

	.read,.skimmed {
		display: block;
		max-width: 70ch;
		padding: 1em 0;
	}

/* the combination of section#display:none with .read/.skimmed:display:block means only texts I have marked as read or skimmed display on the page, although all the code still generates */

	.cw {
		margin: 2.5em;
		font-family: monospace;
		font-size: 0.7em;
		padding-left: 3em;
		padding-right: 3em;
	}

    p,ul,ol {
		font-family: var(--bodytext);
		font-size: var(--bodysize);
	}

	section ul, section ol {
		display:block;
		width:fit-content;
		margin-left:auto;
		margin-right:auto;

	}
	li {
		margin-bottom:1.5;
	}

	h3 { /* Title*/
		font-size:var(--bodysize);
		font-weight:bold;
		margin-bottom:-0.3em;
		}

/* ONLY DISPLAY A YEAR IF THERE IS A YEAR */

	h3 .year {
		display:none;
	}

	h3 span[class*="1"],h3 span[class*="2"],h3 span[class*="3"],h3 span[class*="4"],h3 span[class*="5"],h3 span[class*="6"],h3 span[class*="7"],h3 span[class*="8"],h3 span[class*="9"],h3 span[class*="0"] {
		display:inline;
	}

/* this works as the 'only display link' does: the .year is not displayed, as default, but it IS displayed if it meets the criteria of the class label having a number in it, which only generates that way if there is a year to generate*/

/* ONLY DISPLAY IF THERE IS A SERIES */

    .series {
	    display:none;
    }
    
    .series[class*="a"], .series[class*="e"], .series[class*="i"], .series[class*="o"], .series[class*="u"], .series[class*="y"], .series[class*="w"] {
    display: inline;
    }
    
        
    /* CW: put 'cw' before, don't show if none */
    
	.authorname {
		font-style:italic;
		font-weight:normal;
		font-family:var(--bodytext)
		}

	.authorname::before {
		content: ' - ';
	}
		
	.data {
		text-indent: 1em;
		display:flex;
		flex-direction:row;
		justify-content:left;
		}
			
	.type {
		font-weight:bold;
	}

	.maintext {
		margin-top:-0.5em;
		padding: 0 1.8em 0 1.8em;
		text-indent:2em;
   	}
   	
   	.abstract {
		font-style: italic;
		text-align: right;
   	}
    	


		@media screen and (max-width: 1003px) {

			nav {
				position: static;
				display:flex;
				flex-direction:row;
				flex-wrap:wrap;
				justify-content:space-around;
				height:fit-content;
				max-height:fit-content;
				overflow:visible;
			}
			
			ul {
				flex-basis:33%;
				flex-shrink:0;
				flex-grow:0;
			}

		}

/* ONLY DISPLAY LINKS IF THERE IS A LINK */

	a[href*=".com"],a[href*=".html"],a[href*=".co.uk"],a[href*=".net"],a[href*="#"],a[href*=".dk"],a[href*="a"],a[href*="e"],a[href*="i"],a[href*="o"],a[href*="u"] {
		display:inline;
	}

	a {
		display:none;
	}
	
/* the css is set to display:none every link, but that is superseded by display:inline if it meets the criteria, which is the href actually containing some text. I've set it up to catch common website suffixes plus vowels /*


/* RANKINGS */

.rank1::before {
	content: '★☆☆☆☆'
}

.rank2::before {
	content: '★★☆☆☆'
}

.rank3::before {
	content: '★★★☆☆'
}

.rank4::before {
	content: '★★★★☆'
}

.rank5::before {
	content: '★★★★★'
}

.relevant::before {
	content: '✪ '
}

/* ENTRYTYPES */

.Book::before {
	content:'📗 ';
}

.Serial::before {
	content:'📺 ';
}

.Film::before{
	content:'🎥 ';
}

.Album::before {
	content:'🎜 ';
}

.Article::before {
	content:'🖹 ';
}

.Webpage::before {
	content:'🖳 ';
}

.Podcast::before {
	content:'🎧 ';
}